<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>

<html>

	<head>
		<meta charset="utf-8">
		<title>完善信息</title>
		<style>
			.demobox{
				position: absolute;
				left: 10%;
				background: #fff; 
			}
			.border{
				width: 80%;
				border: 1px solid grey;
				
			}
			body,a {
				font-size: 14px;
				color: #666;
			}
			
			ul,li {
				margin: 0;
				padding: 0;
				list-style: none
			}
			
			.fn-vhid {
				visibility: hidden;
			}
			
			.fn-tinput {
				width: 240px;
				height: 30px;
				line-height: 30px\9;
				border: #ddd solid 1px;
				background-color: transparent;
				padding: 0 6px;
			}
			
			textarea {
				border: #ddd solid 1px;
				background-color: transparent;
				width: 60%
			}
			
			.fn-tinput:focus,textarea:focus {
				border-color: #c00;
			}
			
			.bl-form label {
				float: left;
				width: 100px;
				text-align: right;
				padding-top: 6px;
			}
			
			.bl-form .controls label {
				width: auto;
			}
			
			.bl-form li {
				margin-top: 20px;
				overflow: hidden;
			}
			
			em,strong {
				color: #C00;
			}
			
			span.error {
				color: #C00;
				padding: 0 6px;
			}
			h3{
				margin:10px 0px 10px 20px;
			}
			
		</style>
		
	</head>

	<body>
	
			<div class="demobox border">
			
			<form class="bl-form bl-formhor" id="jsForm" action="js/test.json" method="post" novalidate="novalidate">
				<ul>
					<li class="bl-form-group">
						<h3>发布项目</h3>
					</li>
					<hr />
					<li class="bl-form-group">
						<label><em>*</em>项目名：</label>
						<div class="controls">
							<input id="name" class="fn-tinput" required="" type="text" placeholder="请输入项目名称" value="" data-msg-required="项目名称不能为空">
						</div>
					</li>
                    <li class="bl-form-group">
                        <label><em>*</em>类型：</label>
                        <div class="controls">
                            <select name="select1" id="type">
                                <option value="">----选择项目类型----</option>
                                <option value="1">硬件</option>
                                <option value="2">APP</option>
                                <option value="3">网站</option>
                                <option value="4">软件</option>
                                <option value="5">线下实体</option>
                                <option value="5">电子商务</option>
                            </select>
                        </div>
                    </li>

                    <li class="bl-form-group">
                        <label><em>*</em>联系方式：</label>
                        <div>
                            <select name="select1" id="contactType">
                                <option value="0">----选择联系方式----</option>
                                <option value="3">邮箱</option>
                                <option value="1">qq</option>
                                <option value="2">微信</option>
                            </select>
                            <input name="contect_type"
                                   id="contact"
                                   class="fn-tinput" required="" type="text" placeholder="邮箱/QQ/微信">
                        </div>
                    </li>

                    <li class="bl-form-group">
						<label>所属领域：</label>
						<div class="controls editor">
							<textarea name="field" id="field" required="" rows="4" cols="20"></textarea>
						</div>
					</li>
					<li class="bl-form-group">
						<label>项目简介：</label>
						<div class="controls editor">
							<textarea name="intro" id="intro" required="" rows="4" cols="20"></textarea>
						</div>
					</li>
					<hr />
					<li class="bl-form-group bl-form-btns">
						<label class="fn-vhid">发布：</label>
						<div class="controls">
							<button class="fn-btn btn-primary btn-submit submitBtn" onclick="createProject()">发布</button>
						</div>
					</li>
				</ul>
			</form>
		</div>
	
		
		<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
		<script src="http://cdn.bootcss.com/jquery-validate/1.11.1/jquery.validate.min.js"></script>
            <script src="/js/center.js"></script>

		<script>
			$(function() {
				//jquery.validate
				$("#jsForm").validate({
					submitHandler: function() {
						//验证通过后 的js代码写在这里
					}
				})

			})

			//配置错误提示的节点，默认为label，这里配置成 span （errorElement:'span'）
			$.validator.setDefaults({
				errorElement: 'span'
			});

			//配置通用的默认提示语
			$.extend($.validator.messages, {
				required: '必填',
				equalTo: "请再次输入相同的值"
			});


			//手机验证规则  
			jQuery.validator.addMethod("mobile", function(value, element) {
				var mobile = /^1[3|4|5|7|8]\d{9}$/;
				return this.optional(element) || (mobile.test(value));
			}, "手机格式不对");

			//邮箱或手机验证规则  
			jQuery.validator.addMethod("mm", function(value, element) {
				var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
				return this.optional(element) || (mm.test(value));
			}, "格式不对");
		</script>

	</body>

</html>
